<template>
  <view class="content">
    <view class="loginBox">
      <h3>登录</h3>
      <view class="inputBox">
        <view class="ipt">
          <uni-icons type="contact" size="24" color="#1afa29"></uni-icons>
          <input type="text" :value="username" placeholder="请输入账号" @input="inputValue1" />
        </view>
        <view class="ipt">
          <uni-icons type="eye" size="24" color="#1afa29"></uni-icons>
          <input type="passsword" :value="password" placeholder="请输入密码" @input="inputValue2" />
        </view>
        <view class="forgetPwd">
          <span>忘记密码</span>
          <span @click="register">没有账号，去注册</span>
        </view>
        <button @click="login">登录</button>
      </view>
      <view class="tipbox">
        <view class="txt">
          —— 其他账号登录 ——
        </view>
        <view class="otherUser">
          <uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons>
          <uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons>
        </view>
      </view>
    </view>
    
    <view class="tip">
      邵阳家政服务应用 2024
    </view>
  </view>
</template>

<script>

	import { Login } from '../../api/index.js'
  export default {
    data() {
      return {
        username:'',
		password:''
      }
    },
    onLoad() {

    },
    methods: {
		inputValue1(e){
			console.log(e.target.value)
			this.username = e.target.value
		},
		inputValue2(e){
			console.log(e.target.value)
			this.password = e.target.value
		},
		async login(){
			let loginForm = {
				username:this.username,
				password:this.password
			}
			const { data:res } =await Login(loginForm)
			console.log(res)
			
			if(res.status==0){
				uni.setStorageSync('userinfo',JSON.stringify(res.user))
				// uni.setStorageSync('token',JSON.stringify(res.token))
				uni.setStorageSync('token',res.token)
				uni.showToast({
					title:'登录成功',
					icon:'success'
					
				})
				uni.switchTab({
					url:'/pages/my/my'
				})
				
			}
			
			
		},
		register(){
			uni.navigateTo({
				url:'/pages/register/register'
			})
		}

    }
  }
</script>

<style scoped>
  .content{
    height: 100vh;
    background: #1afa29;
    background-size: 100% 100%;
  }
  .loginBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    width: 90%;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 60rpx;
    box-sizing: border-box;
  }
  h3{
    color: #1afa29;
    font-size: 40rpx;
    letter-spacing: 10rpx;
    margin-bottom: 40rpx;
  }
  .inputBox{
    
  }
  .ipt{
    height: 86rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding-left: 10rpx;
  }
  .ipt input{
    margin-left: 20rpx;
    font-size: 28rpx;
  }
  .ipt input{
    margin-left: 20rpx;
  }
  .forgetPwd{
    font-size: 26rpx;
    color: #b5b5b5;
    text-align: end;
    padding:0 10rpx;
    display: flex;
    justify-content: space-between;
  }
  button{
    margin-top: 20rpx;
    line-height: 85rpx;
    text-align: center;
	background: #1afa29;
    /* background: linear-gradient(to right,rgb(25, 170, 127),rgb(24,120,172)); */
    border-radius: 40rpx;
    color: #fff;
    margin-top: 40rpx;
  }
  
  .tip{
    text-align: center;
    font-size: 28rpx;
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #f4f4f4;
  }
  .tipbox {
    text-align: center;
    margin-top: 100rpx;
  }
  
  .otherUser {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
  }
  
  .txt {
    font-size: 28rpx;
    color: #cbcbcb;
  }
  
  .otherUser .uni-icons {
    margin-left: 20rpx;
  }
</style>